<template>
    <el-container style="height: 80vh;">
      <el-header style="background-color: #f5f7fa; padding: 10px;">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable />
          </el-form-item>
          <el-form-item label="角色类型">
            <el-select v-model="queryParams.type" placeholder="请选择角色类型" clearable>
              <el-option label="管理员" value="admin" />
              <el-option label="用户" value="user" />
              <el-option label="访客" value="guest" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
              <el-option label="启用" value="active" />
              <el-option label="禁用" value="inactive" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="queryParams.department" placeholder="请输入部门" clearable />
          </el-form-item>
          <el-form-item label="分类">
            <el-input v-model="queryParams.category" placeholder="请输入分类" clearable />
          </el-form-item>
          <el-form-item label="等级">
            <el-input v-model="queryParams.level" placeholder="请输入等级" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="success" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table
          :data="roleList"
          border
          stripe
          style="width: 100%; height: 95%;"
        >
          <el-table-column prop="id" label="ID" width="80px" />
          <el-table-column prop="name" label="角色名称" width="180px" />
          <el-table-column prop="description" label="描述" width="180px"  />
          <el-table-column prop="status" label="状态" width="180px" />
          <el-table-column prop="type" label="类型" width="180px" />
          <el-table-column prop="department" label="部门" width="180px" />
          <el-table-column prop="category" label="分类" width="155px"  />
          <el-table-column prop="level" label="等级" width="130px" />
          <el-table-column prop="permissions" label="权限" width="230px" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: center; margin-top: 20px;"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-main>
    </el-container>
  
    <!-- 新增/修改弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
      <el-form :model="form" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option label="启用" value="active" />
            <el-option label="禁用" value="inactive" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type">
            <el-option label="管理员" value="admin" />
            <el-option label="用户" value="user" />
            <el-option label="访客" value="guest" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="form.department" />
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="form.category" />
        </el-form-item>
        <el-form-item label="等级">
          <el-input v-model="form.level" />
        </el-form-item>
        <el-form-item label="权限">
          <el-input v-model="form.permissions" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import request from '../utils/request';
  
  // 查询参数
  const queryParams = ref({
    name: '',
    type: '',
    status: '',
    department: '',
    category: '',
    level: '',
    page: 1,
    pageSize: 10,
  });
  
  // 角色列表
  const roleList = ref([]);
  const total = ref(0);
  
  // 弹窗相关
  const dialogVisible = ref(false);
  const dialogTitle = ref('新增角色');
  const form = ref({
    id: '',
    name: '',
    description: '',
    status: '',
    type: '',
    department: '',
    category: '',
    level: '',
    permissions: '',
  });
  
  // 获取角色列表
  const fetchRoleList = async () => {
    try {
        debugger;
      const response = await request.post('/sys/role/queryPage', queryParams.value);
      roleList.value = response.data.records;
      total.value = response.data.total;
    } catch (error) {
      console.error('获取角色列表失败:', error);
    }
  };
  
  // 查询
  const handleQuery = () => {
    queryParams.value.page = 1;
    fetchRoleList();
  };
  
  // 分页变化
  const handlePageChange = (page) => {
    queryParams.value.page = page;
    fetchRoleList();
  };
  
  // 每页条数变化
  const handleSizeChange = (size) => {
    queryParams.value.pageSize = size;
    fetchRoleList();
  };
  
  // 新增
  const handleAdd = () => {
    dialogTitle.value = '新增角色';
    form.value = {
      id: '',
      name: '',
      description: '',
      status: '',
      type: '',
      department: '',
      category: '',
      level: '',
      permissions: '',
    };
    dialogVisible.value = true;
  };
  
  // 修改
  const handleEdit = (row) => {
    dialogTitle.value = '修改角色';
    form.value = { ...row };
    dialogVisible.value = true;
  };
  
  // 删除
  const handleDelete = async (id) => {
    try {
      await request.post('/sys/role/delete', { id });
      fetchRoleList();
    } catch (error) {
      console.error('删除角色失败:', error);
    }
  };
  
  // 提交表单
  const handleSubmit = async () => {
    try {
      if (form.value.id) {
        await request.post('/sys/role/update', form.value);
      } else {
        await request.post('/sys/role/add', form.value);
      }
      dialogVisible.value = false;
      fetchRoleList();
    } catch (error) {
      console.error('提交表单失败:', error);
    }
  };
  
  // 初始化加载数据
  onMounted(() => {
    fetchRoleList();
  });
  </script>
  
  <style scoped>
  .el-container {
    height: 70vh;
  }
  .el-main {
    padding: 20px;
  }
  </style>